<template>
    <div id="card">
        <div class="Header-wrapper">
            <yd-navbar title="编辑在线申领" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
                <div slot="left" @click="golink">
                    <i class="iconfont icon-back Fcolor"></i>
                </div>
            </yd-navbar>
        </div>
        <div class="card-cont-wrapper">
            <div class="from-wrapper">
                        <yd-cell-item>
                            <span slot="left"> <i>*</i> 申请人：</span>
                            <yd-input slot="right" required :show-required-icon='false' :show-clear-icon="true" :show-success-icon='false' v-model="name" aceholder="请填写"></yd-input>
                        </yd-cell-item>
                     <group>
                         <yd-cell-item>
                             <span slot="left"><i>*</i>&nbsp;手机号：</span>
                        <yd-input :show-success-icon='false' slot="right" regex="mobile" placeholder="请输入手机号码" v-model="phone"></yd-input>
                        </yd-cell-item>
                    </group>
                    <group>
                        <span class="card"><i>*</i>&nbsp;种类：</span>
                        <popup-picker :data="this.list" placeholder="请填写" v-model="typeval"></popup-picker>
                    </group>
                    <group>
                        <yd-cell-item>
                        <span slot="left"><i>*</i>&nbsp;数量：</span>
                        <yd-input  type="number" :show-required-icon='false' :show-clear-icon="true" :show-success-icon='false' slot="right" placeholder="请输入数量" v-model="number"></yd-input>
                        </yd-cell-item>
                    </group>
                    <group>
                        <yd-cell-group>
                            <yd-cell-item arrow>
                                <span slot="left"><i>*</i>&nbsp;选择收货地址：</span>
                                <input slot="right" type="text" @click.stop="showUni = true" v-model="deptname" readonly placeholder="请选择所在校区">
                            </yd-cell-item>
                        </yd-cell-group>
                        <yd-cityselect v-model="showUni" ref="cityselectDemo" :callback="result2" :items="arr" title='所在校区' chooseTitle='请选择' columns=2></yd-cityselect>
                    </group>
                     <div class="EducationalExperience-box-detail">
                        <p class="EducationalExperience-texert">
                            <yd-textarea v-model="goodat" slot="right" placeholder="请输入您的备注" fontsize="12px" maxlength="200"></yd-textarea>
                        </p>
                    </div>
                </div>
            <div class="positioning-wrapper">
                <div class="submit-wrapper">
                    <yd-button type="primary" bgcolor="#F0F0F0" @click.native="submit" style="margin:0 auto">
                        <div class="submit-btn">
                            提交
                        </div>
                    </yd-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
  PopupPicker,
  Datetime,
  Group,
  Cell,
  Picker
} from 'vux'
import apis from '../../../../../static/js/apis.js'
export default {
  data () {
    return {
      arr: [
        {
          v: '1',
          n: ' 请选择',
          c: [
            {
              v: '',
              n: ''
            },
            {
              v: '',
              n: ''
            }
          ]
        }
      ],
      typeval: [],
      name: '',
      phone: '',
      number: '',
      showUni: false,
      deptname: [],
      deptid: '',
      bz: '',
      list: [],
      goodat: ''
    }
  },
  components: {
    Group,
    Picker,
    Cell,
    Datetime,
    PopupPicker,
    apis
  },
  methods: {
    golink () {
      window.history.go(-1)
    },
    result2 (ret) {
      this.deptid = ret.itemValue2
      this.deptname = ret.itemName1 + ' ' + ret.itemName2
    },
    submit () {
      // console.log(this.typeval)
      if (this.name === '') {
        this.$dialog.toast({
          mes: '请输入正确的姓名'
        })
        return false
      } else if (this.phone === '') {
        this.$dialog.toast({
          mes: '手机号不正确'
        })
        return false
      } else if (this.typeval.length === 0) {
        this.$dialog.toast({
          mes: '请选择种类'
        })
        return false
      } else if (this.number === '') {
        this.$dialog.toast({
          mes: '请输入数量'
        })
        return false
      } else if (this.deptname === '') {
        this.$dialog.toast({
          mes: '请填写收货地址'
        })
        return false
      } else {
        this.$axios
          .post(
            apis + '/app/applycard/add',
            this.confusion(
              JSON.stringify({
                username: this.name,
                // itype: '',
                typename: this.typeval[0],
                num: this.number,
                address: this.deptname,
                phone: this.phone,
                remark: this.bz
              })
            ),
            {
              headers: {
                Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
                'Content-Type': 'application/json;charset=UTF-8',
                'Cache-Control': 'no-cache',
                isApp: 'isApp'
              }
            }
          )
          .then(response => {
            this.$dialog.toast({
              mes: '提交成功',
              callback: () => {
                window.history.go(-1)
              }
            })
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      }
    }
  },
  created () {
    this.name = JSON.parse(window.localStorage.getItem('userInfo')).member.name
    this.phone = JSON.parse(window.localStorage.getItem('userInfo')).member.phone
    this.deptname = JSON.parse(window.localStorage.getItem('userInfo')).member.deptname
    this.value = JSON.parse(window.localStorage.getItem('userInfo')).member.type // 种类
    this.$axios
      .post(
        apis + '/app/jobinfoapp/arealist',
        this.confusion(
          JSON.stringify({
            pid: '0'
          })
        ),
        {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      )
      .then(response => {
        this.address = response.data
        this.address.forEach((ele, index) => {
          var pobj = {}
          var cArr = []
          pobj.v = JSON.stringify(ele.id)
          pobj.n = ele.simplename
          pobj.c = cArr
          var clists = ele.deptchildlist
          clists.forEach(item => {
            var cobj = {}
            cobj.v = JSON.stringify(item.id)
            cobj.n = item.simplename
            cArr.push(cobj)
          })
          this.arr.push(pobj)
        })
      })
      .catch(error => {
        console.log(error)
        this.$dialog.toast({
          mes: '服务器异常'
        })
      })
    this.$axios
      .post(
        apis + '/app/applycard/typelist',
        this.confusion(
          JSON.stringify({
          })
        ),
        {
          headers: {
            Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
            'Content-Type': 'application/json;charset=UTF-8',
            'Cache-Control': 'no-cache',
            isApp: 'isApp'
          }
        }
      )
      .then(response => {
        var typeall = response.data
        // var typeid = []
        var typename = []
        // console.log(typeall)
        for (let i = 0; i < typeall.length; i++) {
          // typeid.push(typeall[i].id)
          typename.push(typeall[i].typename)
        }
        this.list.push(typename)
      })
      .catch(error => {
        console.log(error)
        this.$dialog.toast({
          mes: '服务器异常'
        })
      })
  }
}
</script>
<style scoped>
.card {
  width: 25%;
  height: 50px;
  float: left;
  line-height: 50px;
  text-indent: 18px;
  font-size: 15px;
  color: #333;
}
i {
  color: #ff2828;
  margin-right: 2px;
}
.Fcolor {
  color: #fff;
}
.release-right {
  font-size: 12px;
  color: #fff;
}
.yd-cell-item{
    background: #fff;
}
.yd-cell-box {
    margin: 0 !important;
    border-bottom: 1px solid #f1f1f1;
}
.vux-popup-picker-placeholder {
    color: #999;
    font-size: 14px;
}
.positioning-wrapper {
    width: 100%;
    position: fixed;
    bottom: 0;
}
.submit-wrapper {
    height: 51px;
    background-color: #F0F0F0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.submit-wrapper .submit-btn{
    height: 35px;
    width: 225px;
    margin: 0 auto;
    background-color: #FFD602;
    border-radius: 5px;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    color: #FFF;
}
.EducationalExperience-box-detail {
  width: 100%;
  border-bottom: 1px solid #dfdfdf;
  background: #fff;
}
.EducationalExperience-box-detail input {
  width: 100%;
  height: 150px;
  line-height: 150px;
  text-indent: 130px;
}
.EducationalExperience-texert {
  padding: 0 12px;
  border-bottom: 1px solid #dfdfdf;
  overflow: hidden;
}
.yd-cell-item:not(:last-child):after{
  margin-left: 0;
  border-bottom: 1px solid #f1f1f1;
}
</style>
